```html
<template>
  <view class="smart-page">
    <!--页面标题头begin-->
    <view class="smart-page-head">
      <view class="smart-page-head-title">picker选择列表</view>
    </view>
    <!--页面标题头end-->
    <view>
      <view class="title">普通选择器</view>
      <view class="item">
        <view class="item-title">当前选择</view>
        <view class="item-picker">
          <picker @change="bindPickerChange" mode="selector" :range="array" range-key="cname">
            {{array[index].cname}}
          </picker>
        </view>
      </view>
    </view>

    <view>
      <view class="title">日期选择器</view>
      <view class="item">
        <view class="item-title">当前选择</view>
        <view class="item-picker">
          <picker @change="bindDatePickerChange" mode="date">{{choiceDate}}</picker>
        </view>
      </view>
    </view>

    <view>
      <view class="title">时间选择器</view>
      <view class="item">
        <view class="item-title">当前选择</view>
        <view class="item-picker">
          <picker @change="bindTimePickerChange" mode="time">{{time}}</picker>
        </view>
      </view>
    </view>
  </view>
</template>
<script>
export default {
  data() {
    return {
      array: [
        {
          id: 1,
          cname: '中国'
        },
        {
          id: 2,
          cname: '美国'
        },
        {
          id: 3,
          cname: '巴西'
        }
      ],
      index: 0,
      choiceDate: '2021-4-23',
      time: '12:00'
    }
  },
  methods: {
    /*改变选择*/
    bindPickerChange: function(e) {
      console.log(e.detail.value);
      this.index = e.detail.value;
    },
    bindDatePickerChange(e) {
      this.choiceDate = e.detail.value;
    },
    bindTimePickerChange(e) {
      this.time = e.detail.value;
    }
  }
}
</script>
<style>
	.title {
		border-bottom: 1upx solid #C0C0C0;
		padding: 20upx 0;
	}

	.item {
		display: flex;
		border-bottom: 1upx solid #C0C0C0;
	}

	.item-title {
		padding: 20upx;
	}

	.item-picker {
		padding: 20upx 50upx;
	}
</style>
